<template>
  <view class="contract-box">
    <!-- 	<view class="top-nav">
        <view class="nav-item " @click="hanleTab(1)" :class="{active:tabIndex==1}">发起合同</view>
        <view class="nav-item" @click="hanleTab(2)" :class="{active:tabIndex==2}">草稿合同</view>
      </view> -->
    <u-form labelPosition="left" :model="contractForm.data" ref="contractFormRef" :rules="contractForm.rule">
      <view class="main p-l-r-32 bg-color">
        <u-form-item label="主题" prop="title" borderBottom required labelWidth="100" class="">
          <u--input v-model="contractForm.data.title" border="none" placeholder="请输入主题"
                    inputAlign="right"></u--input>
        </u-form-item>
        <u-form-item label="分类" prop="category_id" borderBottom labelWidth="50" class=""
                     @click="categoryPageObj.open()">
          <u--input v-model="contractForm.data.category.text" border="none" placeholder="请选择合同分类"
                    readonly="true"
                    inputAlign="right"></u--input>
        </u-form-item>

        <u-form-item label="签署截止日期" prop="end_date" borderBottom :required="true" labelWidth="100" class="">
          <view @click="showDate.showDatetime = true" style="width: 100%; ">
            <u--input v-model="contractForm.data.end_date" border="none" placeholder="请选择签署截止日期"
                      @focus="show = true" disabled disabledColor="#fff" suffixIcon="arrow-right"
                      suffixIconStyle="color: rgba(0, 0, 0, 0.60)" inputAlign="right"></u--input>
          </view>
        </u-form-item>
        <u-form-item label="标签" prop="label" borderBottom labelWidth="100" class="">
          <view style="width: 100%; ">
            <u--input v-model="contractForm.data.label" border="none" placeholder="请输入标签"
                      disabledColor="#fff" inputAlign="right"></u--input>
          </view>
        </u-form-item>
        <u-form-item label="备注" prop="remark" borderBottom labelWidth="100" class="">
        </u-form-item>
        <u-form-item prop="name" labelWidth="100" class="">
          <u--textarea v-model="contractForm.data.remark" border='none' placeholder="请输入备注内容"
                       :count="true"></u--textarea>
        </u-form-item>
      </view>
      <view class="main p-l-r-32 bg-color">
        <u-form-item label="本人" prop="name" :required="true" labelWidth="100" class=""></u-form-item>
        <view class="sign-border">
          <view class="flex sign" :class="[signerIndex == 1?'active':'']" @click="signerIndex = 1">
            <view class="list">
              <view>
                <image src="../../../static/images/preson-icon.png"></image>
              </view>
              <view>
                <view class="flex">
                  <view v-if="contractForm.data.member.key_word" class="key_word">
                    ({{ contractForm.data.member.key_word }})
                  </view>
                  {{ contractForm.data.member.company_name }}
                  {{ contractForm.data.member.user_name }}
                </view>
                <text>{{ contractForm.data.member.cellphone_secret }}</text>
              </view>
            </view>
            <view class="tag">本人</view>
          </view>
        </view>
        <view class="flex" @click="addKeyWord(1)">
          <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
          <text class="font-color font-size-28"
                style="padding-left: 10rpx;font-weight: 500;">签署位置(关键字)
          </text>
        </view>
        <u-form-item prop="member" class="formitem" labelWidth="50" style="height: 0;padding: 0;">
        </u-form-item>
      </view>
      <view class="main p-l-r-32 bg-color">
        <u-form-item label="签署方" prop="name" :required="true" labelWidth="100" class=""></u-form-item>
        <view class="sign-border" v-if="contractForm.data.signer.user.length > 0">
          <view class="flex sign" :class="[signerIndex == 2?'active':'']"
                v-for="(item,index) in contractForm.data.signer.user" :key="index" @click="signerIndex = 2">
            <view class="list">
              <view>
                <image src="../../../static/images/preson-icon.png"></image>
              </view>
              <view>
                <view class="flex">
                  <view v-if="contractForm.data.signer.key_word" class="key_word">
                    ({{ contractForm.data.signer.key_word }})
                  </view>
                  {{ item.user_name }}
                </view>
                <text>{{ item.cellphone_secret }}</text>
              </view>
            </view>

            <view class="tag">{{ item.signer_user_type == 'member' ? '个人签收方' : '企业签收方' }}</view>
          </view>
        </view>
        <u-form-item prop="signer" labelWidth="50" class=""></u-form-item>
        <view class="flex">

          <view class="flex" style="padding-bottom: 16rpx;margin-left: 30rpx;" @click="addKeyWord(2)">
            <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
            <text class="font-color font-size-28"
                  style="padding-left: 10rpx;font-weight: 500;">签署位置(关键字)
            </text>
          </view>
        </view>
      </view>

      <view class="main p-l-r-32 bg-color">
        <u-form-item label="审核人" prop="name" labelWidth="100" class="" :required="true">
        </u-form-item>
        <view class="sign-border" v-if="contractForm.data.audit_user.id > 0">
          <view class="flex sign" :class="'active'">
            <view class="list">
              <view>
                <image src="../../../static/images/preson-icon.png"></image>
              </view>
              <view>
                <view class="flex">
                </view>
                <text>{{ contractForm.data.audit_user.show_info }}</text>
              </view>
            </view>
            <view class="small-close">
              <u-icon name="close" color="#fff" size="16" @click="auditUserPageObj.delete()"></u-icon>
            </view>
            <view class="tag">企业员工</view>
          </view>
        </view>
        <view class="flex">
          <view class="flex" style="padding-bottom: 16rpx;" @click="auditUserPageObj.open('audit')">
            <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
            <text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">添加企业审核人</text>
          </view>
        </view>
      </view>


      <view class="main p-l-r-32 bg-color">
        <u-form-item label="企业签署人" prop="name" labelWidth="100" class="" :required="true">
        </u-form-item>
        <view class="sign-border" v-if="contractForm.data.signer_user.id > 0">
          <view class="flex sign" :class="'active'">
            <view class="list">
              <view>
                <image src="../../../static/images/preson-icon.png"></image>
              </view>
              <view>
                <view class="flex">
                </view>
                <text>{{ contractForm.data.signer_user.show_info }}</text>
              </view>
            </view>
            <view class="small-close">
              <u-icon name="close" color="#fff" size="16" @click="signerUserPageObj.delete()"></u-icon>
            </view>
            <view class="tag">企业员工</view>
          </view>
        </view>
        <view class="flex">
          <view class="flex" style="padding-bottom: 16rpx;" @click="signerUserPageObj.open('sign')">
            <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
            <text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">添加企业签署人</text>
          </view>
        </view>
      </view>


      <view class="main p-l-r-32 bg-color">
        <u-form-item label="抄送人" prop="name" labelWidth="100" class="">
        </u-form-item>
        <view class="sign-border" v-if="contractForm.data.recipient_members.length > 0">
          <view class="flex sign" :class="'active'" v-for="(item,index) in contractForm.data.recipient_members"
                :key="index">
            <view class="list">
              <view>
                <image src="../../../static/images/preson-icon.png"></image>
              </view>
              <view>
                <view class="flex">
                </view>
                <text>{{ item.label }}</text>
              </view>
            </view>
            <view class="small-close">
              <u-icon name="close" color="#fff" size="16" @click="memberPageObj.delete(index)"></u-icon>
            </view>
            <view class="tag">抄送人</view>
          </view>
        </view>
        <view class="flex">
          <view class="flex" style="padding-bottom: 16rpx;" @click="memberPageObj.open()">
            <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
            <text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">添加抄送人</text>
          </view>
        </view>
      </view>

      <view class="main p-l-r-32 bg-color ">
        <u-form-item label="合同文件(需双方签署)" prop="contract_file" :required="true" labelWidth="200" class="">
          <view style="width: 100%;justify-content: flex-end;display: flex;align-items: center;" class="flex"
                @click="filePage.open(2,1)">
            <text>上传记录</text>
            <u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
          </view>
        </u-form-item>
        <view class="">
          <view class="flex" style="margin-bottom: 24rpx;"
                v-for="(item,index) in contractForm.data.contract_file" :key="index">
            <view class="flex-1 flex">
              <u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16"
                      style="margin-top: 6rpx;"></u-icon>
              <view class="flex line-clamp-1" style="margin-left: 2rpx;">
                <text class="font-size-28 font-color-1"
                      @click="policyPreview(item)">{{ item.org_name }}
                </text>
              </view>
            </view>
            <u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"
                    @click="filePage.fileClose(index,1)"></u-icon>
          </view>
        </view>
        <u-line></u-line>
      </view>
      <view class="main p-l-r-32 bg-color ">
        <u-form-item label="协议文件(仅签署人签署)" labelWidth="200" class="">
          <view style="width: 100%;justify-content: flex-end;display: flex;align-items: center;" class="flex"
                @click="filePage.open(2,2)">
            <text>上传记录</text>
            <u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
          </view>
        </u-form-item>
        <view class="">
          <view class="flex" style="margin-bottom: 24rpx;"
                v-for="(item,index) in contractForm.data.contract_signer_file" :key="index">
            <view class="flex-1 flex">
              <u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16"
                      style="margin-top: 6rpx;"></u-icon>
              <view class="flex line-clamp-1" style="margin-left: 2rpx;">
                <text class="font-size-28 font-color-1"
                      @click="policyPreview(item)">{{ item.org_name }}
                </text>
              </view>
            </view>
            <u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"
                    @click="filePage.fileClose(index,2)"></u-icon>
          </view>
        </view>
        <u-line></u-line>
      </view>
      <view class="main p-l-r-32 bg-color ">
        <u-form-item label="附件(无需签署)" labelWidth="200" class="">
          <view style="width: 100%;justify-content: flex-end;display: flex;align-items: center;" class="flex"
                @click="filePage.open(2,3)">
            <text>上传记录</text>
            <u-icon name="arrow-right" color="rgba(0, 0, 0, 0.60)" size="18"></u-icon>
          </view>
        </u-form-item>
        <view class="">
          <view class="flex" style="margin-bottom: 24rpx;"
                v-for="(item,index) in contractForm.data.contract_other_file" :key="index">
            <view class="flex-1 flex">
              <u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16"
                      style="margin-top: 6rpx;"></u-icon>
              <view class="flex line-clamp-1" style="margin-left: 2rpx;">
                <text class="font-size-28 font-color-1"
                      @click="policyPreview(item)">{{ item.org_name }}
                </text>
              </view>
            </view>
            <u-icon name="close" color="rgba(0, 0, 0, 0.60)" size="14" style="margin-top: 6rpx;"
                    @click="filePage.fileClose(index,3)"></u-icon>
          </view>
        </view>
        <u-line></u-line>
      </view>
    </u-form>
    <!-- 底部按钮 -->
    <view class="flex bottom-button">
      <!-- 	<u-button type="info" text="制定签署位置" class="custom-style" @click="hanleBtn"
          :customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button> -->
      <u-button v-if="contract_id" type="primary" text="保存编辑" class="custom-style" @click="contractForm.edit(2)"
                iconColor="" :customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
      <u-button v-else type="primary" :text="'发起（'+ data.memberInfo.use_count+'/'+data.memberInfo.count+'次)'"
                class="custom-style" @click="contractForm.sumbit(2)" iconColor=""
                :customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
    </view>
    <!-- 弹出框 -->
    <u-datetime-picker :show="showDate.showDatetime" mode="date" @cancel="showDate.cancel" :formatter="formatter"
                       @confirm="showDate.confirm" v-model="showDate.defaultVal"></u-datetime-picker>
    <!-- <view @click="hanleAdd" class="save">保存<br />草稿</view> -->
    <keyword-page ref="keywordPageRef" @return-keyword="keyword.returnKeyword"></keyword-page>
    <file-page ref="filePageRef" @return-file="filePage.returnFile"></file-page>
    <member-page ref="memberPageRef" @return-member="memberPageObj.returnMember"></member-page>
    <contract-category ref="categoryPageRef" @return-category="categoryPageObj.returnCategory"></contract-category>
    <user-page ref="auditUserPageRef" @return-user="auditUserPageObj.returnUser"></user-page>
    <user-page ref="signerUserPageRef" @return-user="signerUserPageObj.returnUser"></user-page>
  </view>
</template>
<script setup>
import KeywordPage from "../../../components/keyword-page.vue";
import FilePage from "../../../components/file-page.vue";
import MemberPage from "../../../components/member-page.vue";
import ContractCategory from "../../../components/contract-category.vue";
import UserPage from "../../../components/user-page.vue";


import {
  onLoad,
  onShow,
  onUnload
} from "@dcloudio/uni-app";
import {
  getEnterpriseInfo
} from "@/api/module/mine.js";
import {
  reactive,
  ref
} from 'vue'
import {
  contractTemplateList,
  membercontractDetail
} from "../../../api/module/contract.js"
import {
  formatter,
  inObject,
  nowDate,
  arrayFilter,
  msg,
  arrayPush,
  arrayGet
} from "../../../utils/common.js"
import {
  showDate
} from "../../../utils/contract/initiate";
import {
  contractCommonRef,
  contractCommon
} from "../../../utils/contract/form";
import {
  policyPreview
} from "../../../utils/article/fileRead";
import UFormItem from "../../../uni_modules/uview-plus/components/u-form-item/u-form-item.vue";


const contract_id = ref('');
const contractForm = contractCommon;
const contractFormRef = contractCommonRef;
const signerIndex = ref(0)
// const tabIndex = ref(1)
const data = reactive({
  memberInfo: {
    count: 0,
    use_count: 0,
  },
});
onShow(() => {

})
const addKeyWord = (index) => {
  signerIndex.value = index
  keyword.open()
}
// 选择时间
showDate.init.callback = function (value) {
  contractForm.data.end_date = value;
};
// 签署文件
const filePageRef = ref(null);
const filePage = reactive({
  returnFile: (files) => {
    if (files.type == 1) {
      contractForm.data.contract_file = arrayPush(contractForm.data.contract_file, files.file);
    }
    if (files.type == 2) {
      contractForm.data.contract_signer_file = arrayPush(contractForm.data.contract_signer_file,
          files.file);
    }
    if (files.type == 3) {
      contractForm.data.contract_other_file = arrayPush(contractForm.data.contract_other_file, files
          .file);
    }
  },
  open: (userType, type) => {
    filePageRef.value.open(userType, type);
  },
  fileClose: (index, type) => {
    if (type == 1) {
      contractForm.data.contract_file = arrayFilter(contractForm.data.contract_file, index);
    }
    if (type == 2) {
      contractForm.data.contract_signer_file = arrayFilter(contractForm.data.contract_signer_file,
          index);
    }
    if (type == 3) {
      contractForm.data.contract_other_file = arrayFilter(contractForm.data.contract_other_file,
          index);
    }
  }
});

// 合同分类
const categoryPageRef = ref(null);
const categoryPageObj = reactive({
  open: () => {
    console.log('show-category');
    categoryPageRef.value.open();
  },
  returnCategory: (changeData) => {
    contractForm.data.category = changeData;
    contractForm.data.category_id = arrayGet(changeData, 'id');
  },
});

// 企业审核
const auditUserPageRef = ref(null);
const auditUserPageObj = reactive({
  open: (type) => {
    auditUserPageRef.value.open(type);
  },
  delete: () => {
    contractForm.data.audit_user = {};
  },
  returnUser: (item) => {

    contractForm.data.audit_user = item;
  },
});

// 企业签署人
const signerUserPageRef = ref(null);
const signerUserPageObj = reactive({
  open: (type) => {
    signerUserPageRef.value.open(type);
  },
  delete: () => {
    contractForm.data.signer_user = {};
  },
  returnUser: (item) => {

    contractForm.data.signer_user = item;
  },
});


// 抄送人选择
const memberPageRef = ref(null);
const memberPageObj = reactive({
  open: () => {
    console.log(memberPageRef);
    memberPageRef.value.open();
  },
  delete: (index) => {
    contractForm.data.recipient_members = arrayFilter(contractForm.data.recipient_members, index);
  },
  returnMember: (memberData) => {

    if (inObject(contractForm.data.recipient_members, 'id', memberData.id)) {
      return msg('抄送人已添加');
    }
    contractForm.data.recipient_members.push(memberData);
  },
});

// 关键字选择
const keywordPageRef = ref(null);
const keyword = reactive({
  open: () => {
    keywordPageRef.value.open(2);
  },
  returnKeyword: (keywordVal) => {
    if (keywordVal.length < 1) {
      return msg('签署关键字获取失败');
    }
    switch (signerIndex.value) {
      case 1:
        if (keywordVal == contractForm.data.signer.key_word) {
          return msg('两方关键字不能相同');

        }
        contractForm.data.member.key_word = keywordVal
        break;
      case 2:
        if (keywordVal == contractForm.data.member.key_word) {
          return msg('两方关键字不能相同');
        }
        contractForm.data.signer.key_word = keywordVal;
        break;
    }
    keywordPageRef.value.close();
  },
});
onUnload(() => {
  contractForm.reset()
})
onLoad((options) => {
  // contractForm.data = contractForm.defaultData;
  contractForm.data.end_date = nowDate();
  getEnterpriseInfo().then(res => {
    data.memberInfo = res;
    const certification = arrayGet(res, 'member.member_certification');
    contractForm.data.member = {
      key_word: "",
      cellphone: arrayGet(certification, 'mobile_no'),
      cellphone_secret: arrayGet(certification, 'mobile_no_secret'),
      user_name: arrayGet(certification, 'name'),
      company_name: res.company_name,
      signer_user_type: 'user'
    }
  }).catch(err => {
  });
  if (options.id > 0) {
    contractTemplateList({
      contract_tpl_id: options.id
    }).then(res => {
      contractForm.data.contract_file = res.contract_tpl_file;
      contractForm.data.title = res.contract_tpl_title;
      contractForm.data.end_date = uni.$u.timeFormat(res.contract_tpl_end_date, 'yyyy-mm-dd')
    })
  }
  if (options.contract_id > 0) {
    contract_id.value = options.contract_id;
    membercontractDetail({
      member_contract_id: options.contract_id
    }).then(res => {
      var member = '',
          signer = '',
          user = res.edit_signer.signer.user;
      res.signers.forEach((v, i) => {
        if (v.signer_type == 'self') {
          member = v;
        } else {
          signer = v;
        }
      })
      user.forEach((v, i) => {
        v.user_name = v.name
      })
      contractForm.data = {
        id: contract_id.value,
        title: res.title,
        end_date: res.end_date,
        remark: res.remark,
        label: res.label,
        contract_file: res.file,
        contract_other_file: res.other_file,
        contract_signer_file: res.signer_file,
        recipient_members:res.recipient_members,
        category: res.category,
        category_id: res.category_id,
        audit_user:res.audit_user,
        signer_user:res.signer_user,
        member: {
          cellphone: member.cellphone,
          cellphone_secret: member.cellphone_secret,
          key_word: member.key_word,
          remaining_quantity: 0,
          signer_user_type: member.signer_user_type,
          user_name: member.name,
        },
        signer: {
          key_word: res.edit_signer.signer.key_word,
          user: user
        },
        is_annex: res.is_annex,
      }
    })
  }
})
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>